<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>3-10 图形复合变换-矩阵组合</title>
  <script src="../lib/index.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0 !important;
    }
    body {
      border: 1px solid #ccc;
    }
    #canvas {
      margin: 50px auto 0;
      display: block;
      background: yellow;
    }
  </style>
</head>
<body>
  <canvas id="canvas" width="400" height="400">
    此浏览器不支持canvas
  </canvas>

  <script>
    const ctx = document.getElementById('canvas');
    const gl = ctx.getContext('webgl');

    /**
     * 创建着色器源码
     * */
    // 顶点着色器
    // 3个uniform变量共同作用于坐标
    // const VERTEX_SHADER_SOURCE = `
    //   attribute vec4 aPosition;
    //   uniform mat4 translateMatrix;
    //   uniform mat4 scaleMatrix;
    //   uniform mat4 rotationMatrix;
    //   void main() {
    //     gl_Position = translateMatrix * scaleMatrix * rotationMatrix * aPosition;
    //   }
    // `;

    // 1个复合变量控制坐标
    const VERTEX_SHADER_SOURCE = `
      attribute vec4 aPosition;
      uniform mat4 mat;
      void main() {
        gl_Position = mat * aPosition;
      }
    `;

    // 片元着色器
    // gl_FragColor vec4(1.0, 0.0, 0.0, 1.0) r, b, g, a
    const FRAGMENT_SHADER_SOURCE = `
      void main() {
        gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
      }
    `;

    /**
     * 创建着色器
     * */
    const program = initShader(gl, VERTEX_SHADER_SOURCE, FRAGMENT_SHADER_SOURCE);

    const aPosition = gl.getAttribLocation(program, 'aPosition');
    // const translateMatrix = gl.getUniformLocation(program, 'translateMatrix');
    // const scaleMatrix = gl.getUniformLocation(program, 'scaleMatrix');
    // const rotationMatrix = gl.getUniformLocation(program, 'rotationMatrix');
    const mat = gl.getUniformLocation(program, 'mat');

    // 创建三角形系列数据
    const points = new Float32Array([
      -0.5, -0.5,
      0.5, -0.5,
      0.0, 0.5
    ]);

    // 创建缓冲区对象
    const buffer = gl.createBuffer();

    // webgl关联缓冲区对象
    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);

    // 顶点数据写入缓冲区对象
    gl.bufferData(gl.ARRAY_BUFFER, points, gl.STATIC_DRAW);

    // 给attribute变量赋值
    gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, 0, 0);

    // 激活attribute变量
    gl.enableVertexAttribArray(aPosition);

    /**
     * 3个矩阵函数共同控制图形复合
     * */
    let deg = 0;
    let translateX = -1;
    let scaleX = 0.1;
    function amination() {
      deg += 0.01;
      translateX += 0.01;
      scaleX += 0.01;

      if (translateX > 1) {
        translateX = -1;
      }

      if (scaleX > 1.5) {
        scaleX = 0.1;
      }

      const translate = getTranslateMatrix(translateX);
      const scale = getScaleMatrix(scaleX);
      const rotate = getRotateMatrix(deg);

      // 3个矩阵函数共同控制图形复合
      // gl.uniformMatrix4fv(translateMatrix, false, translate);
      // gl.uniformMatrix4fv(scaleMatrix, false, scale);
      // gl.uniformMatrix4fv(rotationMatrix, false, rotate);

      // 组合矩阵控制图形复合
      const matrix = mixMatrix(mixMatrix(translate, scale), rotate);
      gl.uniformMatrix4fv(mat, false, matrix);

      gl.drawArrays(gl.TRIANGLES, 0, 3);
      requestAnimationFrame(amination);
    }
    amination();
  </script>
</body>
</html>



















